<template>
  <el-card>
    <div slot="header" class="clearfix">
      <span>开票单回收站</span>
    </div>
    <div class="home-container">

      <v-searchForm :form-data="formData" :form-title="formTitle"/>
      <v-tableBtns
        :show-export="true"
        :show-group-send="true"
        :table-title="tableTitle"
        :table-data="tableData"
        @groupManage="dialogTableVisible=true"
      />
      <v-table

        :table-title="tableTitle"
        :table-data="tableData"
        :recoverable="true"
        :editable="false"
        @recover="recover"
        @del="del"
      />
      <v-pagination
        :page-info="pageInfo"
        :get-table-list="getTableList"
      />
    </div>
  </el-card>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'Home',
  data() {
    return {
      // f分页
      pageInfo: {
        pageNumber: 1,
        pageSize: 30,
        totalPage: 0,
        totalRow: 0
      },

      formTitle: [
        {
          cn: '合同编号：',
          en: 'number'
        },
        {
          cn: '负责人查询：',
          en: 'principle'
        },
        {
          cn: '票据类型：',
          en: 'type'
        },
        {
          cn: '状态：',
          en: 'status',
          type: 'select',
          list: [
            {
              label: '商务填写',
              value: '1'
            },
            {
              label: '助理退回',
              value: '2'
            },
            {
              label: '助理审核中',
              value: '3'
            },
            {
              label: '财务退回',
              value: '3'
            },
            {
              label: '财务审核中',
              value: '3'
            },
            {
              label: '开票中',
              value: '3'
            },
            {
              label: '待商务领取中',
              value: '3'
            },
            {
              label: '已完成',
              value: '3'
            }
          ]
        },
        {
          cn: '开票金额：',
          en: 'money',
          type: 'range',
          dataName: { min: 'moneyMin', max: 'moneyMax' }
        },
        {
          cn: '申请时间：',
          en: 'created_at',
          type: 'time'
        }
      ],
      filter_info: { },
      tableTitle: [
        {
          cn: 'id',
          en: 'id'
        },
        {
          cn: '合同',
          en: 'contract'
        },
        {
          cn: '企业名称',
          en: 'company'
        },
        {
          cn: '税号',
          en: 'fax_num'
        },
        {
          cn: '票据类型',
          en: 'type'
        },
        {
          cn: '开票金额',
          en: 'money'
        },
        {
          cn: '商务负责人',
          en: 'principle'
        },
        {
          cn: '申请时间',
          en: 'time'
        },
        {
          cn: '删除人',
          en: 'deleter'
        },
        {
          cn: '删除时间',
          en: 'del_time'
        }
      ],
      tableData: [
        {
          id: 1,
          contract: '关注1',
          company: '杭州xx公司',
          fax_num: '张三',
          type: '1231232132',
          money: '2017-2-4',
          principle: '王五',
          time: '王五',
          deleter: '王五',
          del_time: '王五'
        }
      ]

    }
  },
  methods: {
    getTableList(data) {
      let datas
      if (this.onFilter) {
        datas = { ...data, filter_info: this.filter_info }
      } else {
        datas = data
      }
      this.$post('action/Contacts/dataGrid', datas)
        .then(res => {
          let list
          if (res.list && res.list.length) {
            list = res.list.map((item, index) => {
              return item
            })
            this.pageInfo.totalPage = res.totalPage
            this.pageInfo.totalRow = res.totalRow
          }
          this.tableData = list || []
        })
    },

    // 搜索
    search() {
      const data = {}
      const origin = this.filter_info
      for (const key in origin) {
        if (origin[key] && key !== 'created_at') {
          data[key] = origin[key]
        } else if (key === 'created_at') {
          data.startDate = origin[key][0]
          data.endDate = origin[key][1]
        }
      }

      this.onFilter = true
      this.filter_info = data
      this.getTableList()
    },
    reset() {
      this.filter_info = {}
      this.onFilter = false
      this.getTableList()
    },

    delMultiple() {

    },

    recover(val) {
      console.log(val)
    },
    del(val) {
      console.log(val)
    }

  },
  computed: {
    ...mapGetters([
      'name',
      'roles'
    ])
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">

</style>
